
<template>
  <!-- 主边栏-数据栏 -->
  <div class="route_page">
    <el-form :inline="true" :model="admin" class="demo-form-inline">
      <el-form-item label="账号" style="float: left; margin-left:0px;">
        <el-input v-model="admin.adminAccount" style="width:100%;" laceholder="审批人"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动区域">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="姓名">
        <el-input v-model="admin.adminName" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" style="float: left; margin-left:40px;">
        <el-input v-model="admin.adminPhone" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left:20px;">
        <el-button type="primary" @click="getPageList()">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <!-- float:left; 让当前按钮靠向最左侧 -->
    <router-link to="/admin_save">
      <el-button type="primary" style="float:left; width:60px; height:32px; padding:0px;">新增</el-button>
    </router-link>
    <el-table :data="initData">
      <el-table-column prop="admin_account" label="账号" width="120">
      </el-table-column>
      <el-table-column prop="admin_name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="admin_age" label="年龄" width="120">
      </el-table-column>
      <el-table-column prop="admin_sex" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="admin_phone" label="联系方式" width="120">
      </el-table-column>
      <el-table-column prop="admin_role" label="角色" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <!-- 删除 -->
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"> 
              删除
            </el-button>
            &nbsp;
            <!-- 编辑 -->
            <!-- <router-link :to="'/admin_edit/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="removeDataById(scope.row.id)"> 
                编辑
              </el-button>
            </router-link>  path:'/admin_edit',-->
            <router-link :to="{
              name: 'admin_edit',
              path:'/admin_edit',
              params:{
                id:scope.row.id,
                adminAccount:scope.row.admin_account,
                adminName:scope.row.admin_name,
                adminPhone:scope.row.admin_phone,
                adminRole:scope.row.admin_role == '管理员' ? 1 : 2,
                adminSex:scope.row.admin_sex == '男' ? 1 : 2,
                adminAge:scope.row.admin_age
              }
            }">
              <el-button type="primary" size="mini" icon="el-icon-edit"> 
                编辑
              </el-button>
            </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="pageNo"
      :page-size="pageSize"
      :total="total"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="getPageList"
    />
  </div>
</template>

<script>

import admin from '../../api/admin.js'

export default {
    name: 'AdminList',
    data(){
      return {
        pageNo:1,
        pageSize:20,
        total:0,
        initData: [],
        admin:{
              adminAccount:'',
              adminName:'',
              adminPhone:''
            }
      }
    },
    methods:{
      initAdminData(){
        // axios.post('http://localhost:8226/wms/admin/list', {"page_no":1, "page_size":this.pageSize}).then(
        //   response => {
        //     console.log('响应成功，对应响应数据：', response.data)
        //     this.initData = response.data.data.data_list
        //     this.total = response.data.data.total
        //     this.pageNo = (response.data.data.page_no / this.total) + 1
        //     this.pageSize = response.data.data.page_size
        //     console.log(this.initData)
        //   },
        //   error => {
        //     console.log('出现错误信息:', error.message)
        //   })
        let queryAdminDto = {
          pageNo:1,
          pageSize:this.pageSize,
          adminAccount:this.admin.adminAccount,
          adminName:this.admin.adminName,
          adminPhone:this.admin.adminPhone
        }
        admin.getAdminList(queryAdminDto).then(
          response => {
            console.log('管理员列表响应数据：', response)
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == "200") {
              //响应成功，数据返回
              this.initData = response.data.data.data_list
              this.pageNo = response.data.data.page_no
              this.pageSize = response.data.data.page_size
              this.total = response.data.data.total
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.error('请求管理员列表异常，异常信息：', error)
          }
        )
      },
      getPageList(pageNo = 1){
        this.pageNo = pageNo
        let queryAdminDto = {
          pageNo:this.pageNo,
          pageSize:this.pageSize,
          adminAccount:this.admin.adminAccount,
          adminName:this.admin.adminName,
          adminPhone:this.admin.adminPhone
        }
        admin.getAdminList(queryAdminDto).then(
          response => {
            console.log('管理员列表响应数据：', response)
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == "200") {
              //响应成功，数据返回
              this.initData = response.data.data.data_list
              this.pageNo = response.data.data.page_no
              this.pageSize = response.data.data.page_size
              this.total = response.data.data.total
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.error('请求管理员列表异常，异常信息：', error)
          }
        )
      },
      removeDataById(id){
        console.log('删除管理员id：', id)
        admin.removeAdmin(id).then(
          response => {
            console.log('删除管理员，响应信息：', response)
            let resData = response.data.data
            let resCode = response.data.code
            let resMsg = response.data.message
            if(resCode == '200' && resData){
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //删除成功，刷新页面
              location.reload()
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.log('删除管理员异常，异常信息：', error)
          }
        )
      }

    },
    beforeMount(){
      console.log('开始初始化管理员信息...')
      this.initAdminData()
    }
}
</script>

<style scoped>
  
</style>